<template>
	<view class="bgf details">
		<view v-if="details.scheduleStatus === 3" class="status">
			<image
				src="https://yilife-oss-online-public.oss-cn-hangzhou.aliyuncs.com/10000001/1015/ADMIN/mbr3rega7on5x0malk1ud0w8i.png?timestamp=1676896860481"
			></image>
		</view>
		<view class="time df lh80">
			<text class="f32 fw600"
				>{{
					details.scheduleStandardDate
						? details.scheduleStandardDate
						: scheduleStandardDate
				}}
				{{ details.scheduleStartTime }}</text
			>
			<label for="" class="ml20 normal">{{
				details.scheduleType == 1
					? '事件'
					: details.scheduleType == 2
					? '协同'
					: '例行'
			}}</label>
		</view>
		<view class="box-bd mb20">
			<view class="pd10"
				><view
					class="f36 g3 lh80"
					style="white-space: pre-wrap"
					v-text="details.scheduleContent"
				></view
			></view>
			<view
				class="pd10"
				v-if="details.voiceDTOS && details.voiceDTOS.length > 0"
			>
				<view class="pd10"
					><view
						class="f36 g3 lh80"
						style="white-space: pre-wrap"
						v-text="details.voiceDTOS[0].voiceText"
					></view
				></view>
				<diy-audio
					:file="details.voiceDTOS[0].voiceUrl"
					:audioTime="details.voiceDTOS[0].voiceDuration"
					:voiceText="details.voiceDTOS[0].voiceText"
				></diy-audio>
			</view>
		</view>
		<view class="tips mb20 pd20 f36" v-if="details.scheduleType === 3">
			<view class="lh60">完成需提交：</view>
			<view class="lh60">照片2张</view>
		</view>
		<view class="box-bd mb20 f32 pd10" v-if="details.scheduleType !== 3">
			<label>{{ renderClassName(details.scheduleStandardDate) }}</label>
			<label
				>{{ details.scheduleStartTime }} ~
				{{ details.scheduleEndTime }}</label
			>
			<label>{{
				details.schedulePriority == 1
					? '普通'
					: details.schedulePriority == 2
					? '重要'
					: '紧急'
			}}</label>
			<label>{{
				details.scheduleType == 1
					? '事件'
					: details.scheduleType == 2
					? '协同'
					: '例行'
			}}</label>
			<label>{{ renderText('label') }}</label>
			<label>{{ renderText('notice') }}</label>
			<label v-if="details.partUserIds.length == 0">无成员</label>
			<view v-if="details.partUserIds && details.partUserIds.length > 0">
				<label
					v-for="(item, index) in details.partUsers"
					:key="index"
					>{{ item.userName }}</label
				>
			</view>
		</view>
		<view class="remark mb20" v-if="details.scheduleStatus === 3">
			<view class="g3 mb20 df ac jsa">
				<view class="flex-1 f38 lh80 fw500">
					<view class="title-icon"></view>
					<text class="ml20">{{
						details.scheduleType !== 3 ? '备注' : '提交内容'
					}}</text>
				</view>
				<view class="f36">{{ details.remarkTimeStr }}</view>
			</view>
			<view class="pd20" v-if="details.remarkInfo.length > 0">
				<view class="mb20">
					<view
						class="mb20"
						style="white-space: pre-wrap"
						v-text="details.remarkInfo[0].remarkContent"
					></view>
					<view
						class="flex-1 g3 textC"
						v-if="
							details.remarkInfo[0].voiceDTOS &&
							details.remarkInfo[0].voiceDTOS.length > 0
						"
					>
						<view class="pd10"
							><view
								class="f36 g3 lh80"
								style="white-space: pre-wrap"
								v-text="
									ddetails.remarkInfo[0].voiceDTOS[0]
										.voiceText
								"
							></view
						></view>

						<diy-audio
							:file="details.remarkInfo[0].voiceDTOS[0].voiceUrl"
							:audioTime="
								details.remarkInfo[0].voiceDTOS[0].voiceDuration
							"
							:voiceText="
								details.remarkInfo[0].voiceDTOS[0].voiceText
							"
						></diy-audio>
					</view>
				</view>
				<view class="mb20">
					<view
						v-for="(item, index) in details.remarkInfo[0]
							.remarkPicUrl"
						:key="index"
						class="img"
						><image
							@tap="priviewImg(item, index)"
							:src="item"
							mode=""
						></image
					></view>
				</view>
			</view>
		</view>
		<view
			class="bottom-button-bd df jsc"
			v-if="
				details.scheduleStatus !== 3 &&
				details.scheduleType === 3 &&
				details.id
			"
		>
			<button class="primary-button w90" @tap="complete">完成</button>
		</view>
		<operateComplete ref="operateCompleteRef" @complete="getData()" />
	</view>
</template>

<script>
import operateComplete from './components/operateCompletion/operateCompletion.vue'
import diyAudio from '@/subPackagesLog/components/diy-audio/diy-audio.vue'

import {
	getCurrentDay,
	formatDate,
	generateWeekData,
	generateMonthData,
	handelFormtDate,
} from '@/common/utils.js'
const dayjs = require('@/common/dayjs.min.js')
export default {
	components: {
		operateComplete,
		diyAudio,
	},
	props: {
		scheduleStandardDate: {
			type: String,
		},
	},
	data() {
		return {
			dayjs,
			details: {
				partUserIds: [],
			},
			current: {
				currentDate: dayjs().format('YYYY-MM-DD'), //获取今日
			},
		}
	},
	methods: {
		getData() {
			setTimeout(() => {
				uni.$emit('refreshData', 1)
				uni.navigateBack({
					delta: 1,
					success() {
						const page = getCurrentPages().pop() //跳转页面成功之后
						if (!page) return
						page.onLoad({ refresh: true }) //如果页面存在，则调用 onLoad 方法
					},
				})
			}, 1000)
		},
		renderClassName(date) {
			let formtDate = handelFormtDate(date, 'YYYY-MM-DD')
			if (formtDate === this.current.currentDate) return '今天'
			return formtDate
		},
		complete() {
			this.$refs.operateCompleteRef.init(this.details)
		},
		renderText(type) {
			let notice = {
				0: '不通知',
				1: '提前5分钟',
				2: '提前15分钟',
				3: '提前30分钟',
			}
			let label = {
				1: '工作',
				2: '学习',
				3: '会议',
				4: '备忘',
			}
			switch (type) {
				case 'notice':
					return notice[this.details.noticeType]
				case 'label':
					return label[this.details.scheduleLabelId]
			}
		},
		getDetails() {
			this.$request
				.request('carer-platform/work/log/schedule/scheduleDetail', {
					header: {
						userId: uni.getStorageSync('userId'),
					},
					method: 'post',
					data: {
						orgId: uni.getStorageSync('orgId'),
						scheduleId: this.id,
						templateId: this.templateId,
					},
				})
				.then((res) => {
					this.details = { ...res.data }
				})
		},
		priviewImg(srcList, index) {
			uni.previewImage({
				urls: this.details.remarkInfo[0].remarkPicUrl,
				current: index,
			})
		},
	},
	onLoad(options) {
		let { id, templateId } = options
		console.log(templateId === 'undefined')
		this.id = id === 'undefined' ? '' : id
		this.templateId = templateId === 'undefined' ? '' : templateId
		this.getDetails()
	},
}
</script>

<style scoped lang="scss">
.details {
	box-sizing: border-box;
	padding: 0 20rpx;
}
.time {
	justify-content: center;
	align-items: center;
}

.normal {
	border: 2rpx solid $primary-color;
	color: $primary-color;
	line-height: 40rpx;
	height: 40rpx;
	padding: 4rpx 10rpx;
	border-radius: 4rpx;
}

.box-bd {
	min-height: 200rpx;
	border: 2rpx solid #f5f5f5;
	border-radius: 6rpx;
	label {
		border: 2rpx solid #cccccc;
		color: #cccccc;
		display: inline-block;
		line-height: 40rpx;
		height: 40rpx;
		padding: 4rpx 10rpx;
		border-radius: 4rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}
}
.tips {
	border: 2rpx solid #f5f5f5;
	border-radius: 6rpx;
	color: #f6a145;
}
.title-icon {
	display: inline-block;
}
.img {
	width: 45%;
	height: 240rpx;
	display: inline-block;
	margin: 0 20rpx 20rpx 0;
	image {
		width: 100%;
		height: 100%;
	}
}
.status {
	width: 160rpx;
	height: 160rpx;
	position: fixed;
	right: 30rpx;
	top: 30rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>
